<template>
    <div class="center-main center-detail">
        <section class="order-main-header">
            <mt-header :title="this.articleDetails.title">
            <mt-button  icon="back" slot="left" @click="handleClose()"></mt-button>
            </mt-header>
        </section>
        <section class="proposal">
            <div class="load-content">
                <div class="load-main">
                    <article class="page-content ail-clearfix" style="font-size: 16px;" v-html="articleDetails.content">{{articleDetails.content}}</article> </div>
                 <div  class="rotate">
                     </div>
            </div>
        </section>
    </div>
</template>
<script>
import axios from 'axios'
export default {

    name:'my',
   data(){
         return {
             articleDetails:""
         }
    },
    mounted() {
        this.getArtcleList();
    },
    methods: {
        getArtcleList(){
            this.$http.get('v1/articleDetail?id='+this.$route.query.id+'').then((res)=>{
            this.articleDetails=res.data.data;
             })
        },
        handleClose(){
                this.$router.go(-1);
            },
    },
}
</script>
<style lang="less" scoped>
.mint-header {
    height: 100px;
    font-size: 32px;
    background-color: #161736 ;
    color: #E0E0F9;
}
.proposal{
    .page-content{
        width: 90%;
        line-height: 50px;
        margin: 0 auto;
    .ail-clearfix{
        img{
            width: 750px;
        }
    }
}
    .flex{
        height:96px;
        background:#161736;
          display: flex;
        justify-content: space-between;
        margin-bottom: 2px;
          align-items: center;
          padding-left: 30px;
          padding-right: 30px;
          img{
              margin-right: 30px;
          }
    }
    a{
        color: #8686C0;
    }
}
    .center-main{
        color: #8686C0;
    }
.flex-between{
    display: flex;
justify-content: space-between;
}

.rotate{
    transform:rotate(-180deg);
-webkit-transform:rotate(-180deg);
-moz-transform:rotate(-180deg);
-o-transform:rotate(-180deg);
-mz-transform:rotate(-180deg);
img{
    width: 30px;
    height: 30px;
}
}
 .drawer--tabs {
    height: 72px;
    line-height: 72px;
    border-bottom: 1px solid #222240;
    padding-left: 30px;
    left: 0;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    word-wrap: break-word;
    font-size: 0;
    background: #222240;
}
 .drawer--tabs span {
    font-size: 28px;
    font-weight: 500;
    margin-right: 60px;
    min-width: 50px;
    color: #E0E0F9
}
.load .active{
    border-bottom:4px solid #5298F1;
    height: 70px;
    color: #5298F1 !important;
}
 .drawer--tabs span i {
    vertical-align: unset
}

 .drawer--tabs span.cur {
    color: inherit
}
  .load-content{
           position: absolute;
           top:140px;
           bottom: 30px;
           overflow-y: scroll;
           -webkit-overflow-scrolling:touch
       }
       .load-main{
           height: 100%;
       }
</style>